<template>
  <div class="wrapper">
    <view class="table_content">
      <view class="table_title">簽呈信息</view>
      <view class="row"><div class="col left_col">名稱</div>
        <div class="col right_col">{{ petitionInfo.petitionName }}</div>
      </view>

      <view class="row"><div class="col left_col">狀態</div>
        <div class="col right_col">
          <u-button style="width: 60%;" :type="classMap[petitionInfo.petitionState]" :text="stateMap[petitionInfo.petitionState]"></u-button>
        </div>
      </view>

      <view class="row"><div class="col left_col">創建人</div>
        <div class="col right_col">{{ petitionInfo.createUserName }}</div>
      </view>

      <view class="row"><div class="col left_col">創建時間</div>
        <div class="col right_col">{{ petitionInfo.createTime }}</div>
      </view>

      <view class="row"><div class="col left_col">到期時間</div>
        <div class="col right_col">{{ petitionInfo.endTime }}</div>
      </view>
      
      <view class="row"><div class="col left_col">備注</div>
        <div class="col right_col">{{ petitionInfo.remark }}</div>
      </view>

      <view class="row">
        <div class="col left_col">附件</div>
        <div class="col right_col">
          <div class="desc_box">
            <span v-for="(item,index) in ossList" :key="index" @click="downloadFile(item)">
              {{ item.fileName }}
            </span>
          </div>
        </div>
      </view>

      <view class="row"><div class="col left_col">退回原因</div>
        <div class="col right_col" style="color: red;word-break:break-word;">{{ petitionInfo.returnReason }}</div>
      </view>
    </view>

    <view class="btn_group">
      <u-button @click="goBack">返回</u-button>
      <u-button type="primary" v-if="petitionInfo.petitionState == 45" @click="handleDown(petitionInfo)">下载</u-button>
      <!-- <u-button v-if="showCloseBtn" type="warning" @click="handleBtn(0)">關閉簽呈</u-button>
      <u-button v-if="showRestartBtn" type="primary" @click="handleBtn(1)">重啟簽呈</u-button> -->
    </view>
  </div>
</template>

<script>
import {openPetitionApi,downloadPetition, closePetitionApi } from '@/api/signManage/petition.js'
export default {
  name: "",
  props: {
    infoData: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      stateMap: {
        30: '已退回',
        1: '進行中',
        45: '已完成',
        15: '已關閉',
        16: '已失效'
      },
      classMap: {
        30: 'error',
        1:  'primary',
        45: 'success',
        15: 'warning',
        16: 'error'
      },
      loginUserName: ''
    };
  },
  mounted() {
    this.loginUserName = this.$store.getters.userInfo.username;
  },
  computed: {
    petitionInfo() {
      if(Object.keys(this.infoData).length){
        return this.infoData.petitionInfo;
      }else{
        return {};
      }
    },
    ossList() {
      const arr = this.petitionInfo.ossUrl ? this.petitionInfo.ossUrl.split(',') : []
      if (arr.length) {
        return arr.map(url => {
          const fileName = url.substring(url.lastIndexOf('/') + 1)
          return { url, fileName }
        })
      } else {
        return []
      }
    },
     showCloseBtn(){
      let arr=[1,30,16]
      return this.petitionInfo?arr.indexOf(this.petitionInfo.petitionState)>-1 && this.loginUserName==this.petitionInfo.ownerAccount:false
    },
    showRestartBtn(){
      return  this.petitionInfo?this.petitionInfo.petitionState===15 && this.loginUserName==this.petitionInfo.ownerAccount:false
    },
  },
  methods: {
    goBack(){
      this.$goBack();
    },
    handleBtn(isOpen) {
      const API = isOpen ? openPetitionApi : closePetitionApi
      const str = isOpen ? '重啓' : '關閉'
     uni.showModal({
      title: '提示',
      content: `此操作將會${str}該簽呈， 是否繼續？`,
      success:  (res) =>{
        if (res.confirm) {
          API(this.$route.query).then(res=>{
            this.$u.toast(res.message);
            uni.redirectTo({url: '/pages/petition/myPetition/index'})
          })
        } else if (res.cancel) {
          console.log('用户点击取消');
        }
      }
    });
    },
    downloadFile(item){
      const { url, fileName } = item
      this.downloadForH5(url)
    },
    downloadForH5(url) {
      uni.showLoading({ title: '下載中...', mask: true });
			const link = document.createElement('a')
			link.href = url
			link.download = url.split('/').pop() // 使用 URL 最后一部分作为文件名
			document.body.appendChild(link)
			link.click()
      uni.hideLoading();
			document.body.removeChild(link)
		},
    handleDown(row) {
      downloadPetition({ petitionId: row.templatePetitionId }).then(res => {
        const url = window.URL.createObjectURL(res)
        const link = document.createElement('a')
        link.href = url
        link.setAttribute('download', `${row.petitionName}.pdf`)
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link) // 下载完成移除元素
        this.$message.success('下载成功')
      }).catch(err => {
        this.$message.error(err.message || '下载失败')
      })
    }
  },
  created() {},
};
</script>

<style lang="scss" scoped>
.wrapper{
  padding: 0 30rpx;
  margin-top: 50rpx;
  .table_content {
    background-color: #fff;
    border-radius: 12rpx;
    box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.05);
    >view{
       border: 4rpx solid #9a9a9a;
        border-bottom: none;
        &:last-child {
          border-bottom: 4rpx solid #9a9a9a;
        }
    }
    .table_title{
      background-color: #d7d7d7;
      text-align: center;
      height: 100rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 28rpx;
    }
    .row {
      display: flex;
      min-height: 100rpx;
      justify-content: space-between;
      .col {
        box-sizing: border-box;
        padding: 30rpx 40rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 26rpx;
        text-align: center;
        color: #333;
        text {
          white-space: normal;
          word-break: break-all;
        }
        .active_num {
          font-size: 30rpx;
          font-weight: bold;
          color: #2e7d32;
        }
        .active_box {
          font-size: 30rpx;
          font-weight: bold;
          background-color: #2e7d32;
          color: #fff;
          display: inline-block;
          padding: 10rpx 18rpx;
          border-radius: 8rpx;
        }
        .chart {
          margin-left: 8rpx;
        }
        .red_char {
          color: red;
        }
        .info_char {
          color: #8f928f;
        }
        .green_char {
          color: #008020;
        }
      }
      .left_col {
        width: 35%;
        border-right: 4rpx solid #9a9a9a;
        background-color: #f2f2f2;
      }
      .right_col {
        width: 65%;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6rpx;
        justify-content: center;
        background-color: #fff;
      }
    }
  }
  .btn_group{
    padding: 90rpx 0;
    padding-bottom: 140rpx;
    display: flex;
    justify-content: center;
    gap: 30rpx;
    .u-button{
      width: 40%;
    }
  }
  .desc_box{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    span{
      word-break: break-all;
      text-decoration: underline;
    }
  }
}
</style>
